<script setup>
import { computed, ref, onMounted } from 'vue'
import { useOrderStore, useUserStore } from '@/stores/index'

const orderStore = useOrderStore()
const userStore = useUserStore()
const tableData = ref([])
const user = ref({})
user.value = userStore.user
const getBossOrder = async (id) => {
  await orderStore.getBossOrderList(id)
  tableData.value = orderStore.bossOrderList
  console.log(tableData.value)
}
console.log(user.value.id)
console.log(tableData.value)

onMounted(() => {
  if (user.value.id) {
    getBossOrder(user.value.id)
    console.log(tableData.value)
  }
})
const search = ref('')
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const handleEdit = () => { }
const handleDelete = () => { }
</script>
<template>
  <div>
    <div class="title"><h3>订单管理</h3></div>
    <div class="orderList">
      订单区域
      <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="日期" prop="createtime" />
        <el-table-column label="游戏名称" prop="goodname" />
        <el-table-column align="right">
          <template #header>
            <div class="search-container">
              <el-input v-model="search" size="middle" placeholder="按游戏名称搜索" />
            </div>
          </template>
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
              >查看详情</el-button
            >
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
              >退单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  /*  background-color: #be7e7e; */
  h3 {
    color: #027efb;
  }
}

.orderList {
  /* background-color: #5caa81; */

  .search-container {
    display: flex;
  }
}
</style>
